<template>
  <div style="min-width: 809px">
    <div v-if="$route.path == '/couponList'">
      <div class="vs-search-box" style="padding: 24px 22px">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="分组编号">
            <el-input type="text" style="width: 200px" v-model="paging.coupon_pool_id"></el-input>
          </el-form-item>
          <el-form-item label="编号">
            <el-input type="text" style="width: 200px" v-model="paging.coupon_list_id"></el-input>
          </el-form-item>
          <el-form-item label="" style="float: right; margin-right: 0">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item label="类型">
            <el-select
              style="width: 200px"
              clearable
              v-model="paging.type"
              placeholder=""
            >
              <el-option label="满减券" value="0"> </el-option>
              <el-option label="折扣券" value="1"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input type="text" style="width: 200px" v-model="paging.phone"></el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input type="text" style="width: 200px" v-model="paging.title"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              style="width: 200px"
              clearable
              v-model="paging.status"
              placeholder=""
            >
              <el-option label="未使用" value="0"> </el-option>
              <el-option label="已使用" value="1"> </el-option>
              <el-option label="已失效" value="2"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
           <el-button
            icon="el-icon-upload2"
            @click="exportFile()"
            :loading="isExport"
            >导出</el-button
          >
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
        >
          <el-table-column
            width="80px"
            label="编号"
            prop="id"
          ></el-table-column>
          <el-table-column prop="title" label="名称"> </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <span>{{ scope.row.off_type == 0 ? "满减券" : "折扣券" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="适用范围">
            <template slot-scope="scope">
              <span>{{ scope.row.coupon_scope_use_id | type }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="有效时间">
            <template slot-scope="scope">
              <span
                >{{ scope.row.start_time | dateFormat("YYYY-MM-DD") }} 到
                {{ scope.row.end_time | dateFormat("YYYY-MM-DD") }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="优惠设置">
            <template slot-scope="scope">
              <span v-if="scope.row.off_type == 0"
                >满{{ scope.row.min_value }}元 减{{
                  scope.row.face_value
                }}元</span
              >
              <span v-else
                >{{ scope.row.discount }}折 最大折扣金额{{
                  scope.row.max_discount
                }}元</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="username" label="发放用户"> </el-table-column>
          <el-table-column prop="phone" label="手机号"> </el-table-column>
          <el-table-column prop="create_time" label="状态">
            <template slot-scope="scope">
              <span>{{ scope.row.status | typeName }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" width="130" label="操作">
            <template slot-scope="scope">
              <!-- <span @click="dialogFormVisible = true" class="tab-hui-text">发放</span> -->
              <span @click="setRow(1, scope.row)" class="tab-hui-text"
                >查看</span
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <router-view></router-view>

    <el-dialog title="发放优惠券" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form">
        <el-form-item label="手机号/会员卡号">
          <el-input v-model="paging.username" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      recordList: [],
      loading: false,
      loading2: false,
      isBtn: false,
      dialogVisible: false,
      paging: {
        type: "", //姓名
        title: "", //开始时间
        status: "", //结束时间
        phone:"",
        page: 1,
        total: 0,
        limit: 10,
        coupon_list_id: "",
        coupon_pool_id: "",
      },
      form: {
        date: "",
      },
      isExport:false,
      tableData: [
        {
          username: "111",
          code: "111",
          create_time: "111",
        },
      ],
    };
  },
  filters: {
    typeName(val) {
      switch (val) {
        case 0:
          val = "未使用";
          break;
        case 1:
          val = "已使用";
          break;
        case 2:
          val = "已失效";
          break;
      }
      return val;
    },
    type(val) {
      switch (val) {
        case 0:
          val = "通用券";
          break;
        case 1:
          val = "商品券";
          break;
        case 2:
          val = "项目券";
          break;
      }
      return val;
    },
  },
  created() {
    if (this.$route.path == "/couponList") {
      this.handleCurrentChange(1);
    }
  },
  methods: {
    // 导出文件
    async exportFile() {
      this.isExport = true;
      let res = await this.$Http.exportUserCoupons(this.paging);
      this.utils.downloadXlsx(res, "优惠券--发放列表");
      this.isExport = false;
    },
    async setRow(type, row) {
      // 如果是已使用过优惠券跳转到订单详情
      this.utils.goUrl(`/lookDetails?title=优惠券详情&id=${row.id}&type=1`);
      return;
    },
    handleClose(dom) {
      this.$refs["ruleForm"].resetFields();
      this.dialogVisible = false;
      dom && dom();
    },
    async repairGetList() {
      this.loading = true;
      let { code, data } = await this.$Http.grantCouponRecord(this.paging);
      this.loading = false;
      if (code) {
        this.tableData = data.data;
        this.paging.limit = data.per_page;
        this.paging.total = data.total;
      }
    },
    reset() {
      //重置
      this.paging = this.$options.data().paging;
      this.form.date = "";
      this.handleCurrentChange(1);
    },
    handleSizeChange(val) {
      this.paging.limit = val;
      this.repairGetList();
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.repairGetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
.operation-box{
    display: flex;
    justify-content: flex-end;
}
</style>